<template>
	<view class="message_container">
		<!-- 导航栏 -->
		<view class="custom-navigation-bar"></view>
		<!-- 标题栏 -->
		<view class="index_title flex">
			<u-icon name="close-circle" size="60" @click="toDemand"></u-icon>
			<view class="ml200">
				发布信息
			</view>
		</view>
		<!-- 选择 -->
		<view class="index_radio mt30">
			<u-tabs :active="currIndex" :list="radioList" lineColor="#459BF8" lineWidth="60rpx" lineHeight="8rpx"
				@change="change" :scrollable="false" :activeStyle="{color:'#459BF8',fontSize: '30rpx'}"
				:inactiveStyle="{color:'#333',fontSize: '30rpx'}"
				itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 65rpx;"></u-tabs>
		</view>
		<view class="index_wrap">
			<!-- 闲置物 -->
			<view class="" v-if="currIndex==0">
				<!-- 内容 -->
				<view class="message_content mt40 br50">
					<u--textarea v-model="message" placeholder="描述你要发布的信息内容" count maxlength="3000"
						height="400"></u--textarea>
				</view>
				<!-- 上传图片 -->
				<view class="index_image flex align-end mt30">
					<view class="image_up">
						<view class="flex align-center flex-center mt40">
							<u-icon name="plus" color="#333" size="50"></u-icon>
						</view>
						<view class="text-center mt50">
							上传图片
						</view>
					</view>
					<view class="">
						(0/9)
					</view>
				</view>
				<!-- 定位 -->
				<view class="mt30">
					苏州工业园区·都市花园
				</view>
				<!-- 发布 -->
				<view class="mt300 pb200 message_release">
					<u-button color="#333" :plain="true" text="发布闲置"></u-button>
				</view>
			</view>
			<!-- 帮个忙 -->
			<view class="message_hope mt70" v-if="currIndex==1">
				<view class="">
					服务对象
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="object"></u--input>
				</view>
				<view class="mt30">
					联系方式
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="phone"></u--input>
				</view>
				<view class="mt30">
					地点
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="address"></u--input>
				</view>
				<view class="mt30">
					时间
				</view>
				<view class="mt30 flex align-center">
					<view class="message_oldTime flex flex-between align-center" @click="oldShow = true">
						<view class="pl10 text-shijian f25">
							{{ formattedTime || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="mlr20">
						至
					</view>
					<view class="message_oldTime flex flex-between align-center"
						@click="handleEndDatetimeClick('newTime')">
						<view class="pl10 text-shijian f25">
							{{ formattedTimeNew || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="">
						<!-- 开始时间 -->
						<u-datetime-picker ref="datetimePicker" :show="oldShow" v-model="oldTime" mode="datetime"
							:formatter="formatter" @confirm="oldConfirm" @cancel="oldShow = false"></u-datetime-picker>
						<!-- 结束时间 -->
						<u-datetime-picker ref="datetimePickers" :show="newShow" v-model="newTime" mode="datetime"
							:formatter="formatter" @confirm="newConfirm" @cancel="newShow = false"
							:min-date="oldTime"></u-datetime-picker>
					</view>
				</view>
				<view class="mt30">
					具体事宜
				</view>
				<view class="mt30">
					<u--textarea v-model="matters" height="200"></u--textarea>
				</view>
				<view class="mt100 pb50 message_release">
					<u-button color="#333" :plain="true" text="发布帮忙"></u-button>
				</view>
			</view>
			<!-- 活动 -->
			<view class="message_activity" v-if="currIndex==2">
				<view class="activity_up mt30">
					<view class="image_up">
						<view class="flex align-center flex-center mt40">
							<u-icon name="plus" color="#333" size="50"></u-icon>
						</view>
						<view class="text-center mt50">
							上传图片
						</view>
					</view>
				</view>
				<view class="mt30">
					活动名称
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="activityName"></u--input>
				</view>
				<view class="mt30">
					发起人名称
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="activityBoss"></u--input>
				</view>
				<view class="mt30">
					联系方式
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="activityPhone"></u--input>
				</view>
				<view class="mt30">
					活动地点
				</view>
				<view class="mt30">
					<u--input border="surround" v-model="activityAddress"></u--input>
				</view>
				<view class="mt30">
					报名时间
				</view>
				<view class="mt30 flex align-center">
					<view class="message_oldTime flex flex-between align-center" @click="oldShowSignTime = true">
						<view class="pl10 text-shijian f25">
							{{ signTime || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="mlr20">
						至
					</view>
					<view class="message_oldTime flex flex-between align-center" @click="signTimeNewClick">
						<view class="pl10 text-shijian f25">
							{{ signTimeNew || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="">
						<!-- 开始时间 -->
						<u-datetime-picker ref="oldDatetimePicker" :show="oldShowSignTime" v-model="oldTimeSignTime"
							mode="datetime" :formatter="formatter" @confirm="oldUpConfirm"
							@cancel="oldShowSignTime = false"></u-datetime-picker>
						<!-- 结束时间 -->
						<u-datetime-picker ref="newDatetimePicker" :show="newShowSignTime" v-model="newTimeSignTime"
							mode="datetime" :formatter="formatter" @confirm="newUpConfirm"
							@cancel="newShowSignTime = false" :min-date="oldTimeSignTime"></u-datetime-picker>
					</view>
				</view>
				<view class="mt30">
					活动时间
				</view>
				<view class="mt30 flex align-center">
					<view class="message_oldTime flex flex-between align-center" @click="oldTaskShow = true">
						<view class="pl10 text-shijian f25">
							{{ taskTimes || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="mlr20">
						至
					</view>
					<view class="message_oldTime flex flex-between align-center" @click="taskTimeNewsClick">
						<view class="pl10 text-shijian f25">
							{{ taskTimeNews || '请选择时间' }}
						</view>
						<view class="pr10">
							<u-icon name="clock"></u-icon>
						</view>
					</view>
					<view class="">
						<!-- 开始时间 -->
						<u-datetime-picker ref="oldTaskDatetimePicker" :show="oldTaskShow" v-model="oldTimeTaskTime"
							mode="datetime" :formatter="formatter" @confirm="oldTaskConfirm"
							@cancel="oldTaskShow = false"></u-datetime-picker>
						<!-- 结束时间 -->
						<u-datetime-picker ref="newTaskDatetimePicker" :show="newShowTaskTime" v-model="newTimeTaskTime"
							mode="datetime" :formatter="formatter" @confirm="newTaskConfirm"
							@cancel="newShowTaskTime = false" :min-date="oldTimeTaskTime"></u-datetime-picker>
					</view>
				</view>
				<view class="mt200 pb100 message_release">
					<u-button color="#333" :plain="true" text="发布活动"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本案列数据
				radioList: [{
					name: '闲置物',
				}, {
					name: '帮个忙',
				}, {
					name: '活动'
				}],
				currIndex: 0,
				message: '',
				//帮个忙
				object: '',
				phone: '',
				address: '',
				matters: '',
				oldShow: false,
				oldTime: Number(new Date()),
				newShow: false,
				newTime: '',
				formattedTime: null, // 添加 formattedTime 属性
				formattedTimeNew: null,
				//活动
				activityName: '',
				activityBoss: '',
				activityPhone: '',
				activityAddress: '',
				oldShowSignTime: false,
				newShowSignTime: false,
				oldTimeSignTime: Number(new Date()),
				newTimeSignTime: '',
				signTime: null,
				signTimeNew: null,
				oldTaskShow: false,
				newShowTaskTime: false,
				oldTimeTaskTime: Number(new Date()),
				newTimeTaskTime: '',
				taskTimes: null,
				taskTimeNews: null,
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.$refs.datetimePickers.setFormatter(this.formatter)
			this.$refs.oldDatetimePicker.setFormatter(this.formatter)
			this.$refs.newDatetimePicker.setFormatter(this.formatter)
			this.$refs.oldTaskDatetimePicker.setFormatter(this.formatter)
			this.$refs.newTaskDatetimePicker.setFormatter(this.formatter)
		},
		onLoad(option) {
			console.log(option.id, 'message接受的options')
			if (option.id === 0) {
				this.currIndex = 0
			} else if (option.id === 1) {
				this.currIndex = 1
			} else {
				this.currIndex = 2
			}
		},
		methods: {
			//往需求首页
			toDemand() {
				uni.navigateBack({
					delta: 1
				});
			},
			//处理下标切换
			change(current) {
				this.currIndex = current.index
				console.log(current.index)
			},
			// 时间选择器格式化
			formatter(type, value, date) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value;
			},
			// 格式化时间
			formatTime(time) {
				const date = new Date(time);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const nowTime = `${year}-${month}-${day} ${hours}:${minutes}`;
				console.log(nowTime, '格式化的时间');
				return nowTime;
			},
			// 点击确定按钮隐藏时间选择器
			oldConfirm(value) {
				this.oldShow = false;
				// 格式化选择的时间并更新显示
				this.formattedTime = this.formatTime(value.value);
			},
			newConfirm(value) {
				this.newShow = false;
				this.formattedTimeNew = this.formatTime(value.value);
			},
			oldUpConfirm(value) {
				this.oldShowSignTime = false;
				this.signTime = this.formatTime(value.value);
			},
			newUpConfirm(value) {
				this.newShowSignTime = false;
				this.signTimeNew = this.formatTime(value.value);
			},
			oldTaskConfirm(value) {
				this.oldTaskShow = false;
				this.taskTimes = this.formatTime(value.value);
			},
			newTaskConfirm(value) {
				this.newShowTaskTime = false;
				this.taskTimeNews = this.formatTime(value.value);
			},
			// 处理结束日期选择器的点击事件
			handleEndDatetimeClick() {
				if (this.formattedTime === null) {
					// 如果开始日期未选择，则弹出提示
					wx.showToast({
						title: '请先选择开始日期',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.newShow = true;
				}
			},
			signTimeNewClick() {
				if (this.signTime === null) {
					// 如果开始日期未选择，则弹出提示
					wx.showToast({
						title: '请先选择开始日期',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.newShowSignTime = true;
				}
			},
			taskTimeNewsClick() {
				if (this.taskTimes === null) {
					// 如果开始日期未选择，则弹出提示
					wx.showToast({
						title: '请先选择开始日期',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.newShowTaskTime = true;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.message_container {
		background: #EEEEEE;
		height: 100%;
		width: 100%;

		// 导航栏
		.custom-navigation-bar {
			height: 100rpx;
		}

		.index_title {
			width: 90%;
			margin: 0 auto;
		}

		// 选择
		.index_radio {
			width: 100%;
			height: 70rpx;
			background: #FFFFFF;

			/deep/ .u-radio-group {
				justify-content: space-between;
			}
		}

		.index_wrap {
			width: 90%;
			margin: 0 auto;

			.message_content {
				/deep/ .u-textarea {
					border-radius: 30rpx;
				}
			}

			.index_image {
				.image_up {
					width: 200rpx;
					height: 200rpx;
					background: #fff;
				}
			}

			.message_release {
				/deep/ .u-button {
					width: 80%;
					height: 90rpx;
					border-radius: 50rpx;
				}
			}

			// 帮个忙

			.message_hope {
				/deep/ .u-input {
					background: #FFFFFF;
					height: 80rpx;
				}

				/deep/ .u-textarea {
					background: #FFFFFF;
				}

				.message_oldTime {
					width: 300rpx;
					height: 60rpx;
					border: 1rpx solid #797979;
					background: #FFFFFF;
				}
			}

			// 活动
			.message_activity {
				.activity_up {
					width: 100%;
					height: 400rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;

					.image_up {
						width: 200rpx;
						height: 200rpx;
						background: #F5F5F5;
					}
				}

				.message_oldTime {
					width: 300rpx;
					height: 60rpx;
					border: 1rpx solid #797979;
					background: #FFFFFF;
				}

				/deep/ .u-input {
					background: #FFFFFF;
					height: 60rpx;
				}
			}
		}
	}
</style>